<script>
import { ref, watch } from 'vue'
import { ElSelect } from 'element-plus'

export default {
  name: 'YqSelect',
  components: {
    ElSelect
  },
  props: {
    modelValue: [String, Number, Boolean, Object, Array],
    placeholder: {
      type: String,
      default: '请选择'
    },
    // 支持更多Element Plus Select的属性
    size: {
      type: String,
      default: 'default'
    },
    clearable: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    filterable: {
      type: Boolean,
      default: false
    },
    remote: {
      type: Boolean,
      default: false
    }
  },
  emits: ['update:modelValue', 'change', 'clear', 'focus', 'blur'],
  setup(props, { emit }) {
    const selectedValue = ref(props.modelValue)

    watch(selectedValue, (newValue) => {
      emit('update:modelValue', newValue)
    })

    watch(() => props.modelValue, (newValue) => {
      selectedValue.value = newValue
    })

    const handleChange = (value) => {
      emit('update:modelValue', value)
      emit('change', value)
    }

    return {
      selectedValue,
      handleChange
    }
  }
}
</script>

<template>
  <el-select
    class="yq-select"
    v-model="selectedValue"
    :placeholder="placeholder"
    :size="size"
    :clearable="clearable"
    :disabled="disabled"
    :filterable="filterable"
    :remote="remote"
    @change="handleChange"
    @clear="$emit('clear')"
    @focus="$emit('focus')"
    @blur="$emit('blur')"
    v-bind="$attrs"
  >
    <slot></slot>
  </el-select>
</template>

<style scoped>
.yq-select {
  /* 可以在这里添加自定义样式覆盖Element Plus的默认样式 */
  width: 100%;
}
</style>